// 该文件用来创建按钮权限相关的自定义指令

import type {App} from 'vue';
import {storeToRefs} from 'pinia';
import pinia from '@/stores';
import {useUserInfoStore} from '@/stores/userInfo';

// 插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。下面是如何安装一个插件的示例
// 如果该函数被 app.use 调用了，那么这个函数的第一个参数就 app 对象
export default function has(app: App) {
    // console.log(`app`, app);
    // 编写给 Vue 扩展功能的代码
    // console.log(`has 执行了`);
    // 注册一个 自定义的 指令
    // 自定义指令提供选项，这些选项类似组件的生命周期选项
    app.directive('has', {
        // 将会在该执行被挂载到某个元素上的时候执行
        mounted(el, bindings) {
            //el: 当前指令所在的元素/组件
            //bindings: 指令的数据（修饰符、指令的名称、指令的值）
            // console.log(bindings);

            // 获取当前登录用户的信息
            // 在组件外调用指定仓库的时候，最好传入createPinia 方法创建出来的对象
            const {userInfo} = storeToRefs(useUserInfoStore(pinia));
            // console.log(`mounted`, userInfo.value.buttons);
            // 获取当前指令传入的值
            const value = bindings.value;
            // 如果 value 在 userInfo的buttons 数组中存在，则表示当前用户拥有该按钮权限
            // 如果不存在则表示当前用户是没有该按钮权限的，那么我们就删除掉当前元素
            // 通过 el 就可以获取当前元素
            // console.log(`el`, el);
            // el 是原生 DOM 元素
            if (!userInfo.value.buttons.includes(value)) {
                // 删除
                el.remove();
            }
        }
    })
}
